<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <Button type="primary" class="Button" @click="remove()">删除</Button>
          <Button type="primary" class="Button" @click="add()">添加</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange"></Table>
        </Row>
        <!--<div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>-->
      </Card>
      <Modal :width="600" title="详情"
             v-model="showCurrentTableData"
             ok-text="确定"
             cancel-text="取消"
             @on-ok=""
             @on-cancel=""
             class-name="vertical-center-modal"
             class="Modal-Detail-div">
        <div class="table-head">
          <Button type="primary" class="Button" @click="remove_collection()">删除</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="collection_columns" :data="collection_data"
                 @on-row-click="collection_onRowData" @on-selection-change="collection_selectionChange"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Modal>
      <!--编辑-->
      <Modal v-model="addCurrentTableData" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">编辑</h3>
        <Form label-position="top">
          <FormItem label="收藏夹名称">
            <Input v-model="addData.name" type="textarea" class="textarea_resize"
                   :autosize="{minRows: 3}" placeholder="收藏夹名称"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideAddModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="save()">确定</Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    components: {},
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '收藏夹名称',
          },
          {
            key: 'create_time',
            title: '创建时间',
          },
          {
            title: 'Action',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: e => {
                      e.stopPropagation();
                      var data = params.row;
                      this.update(data, params.index);
                    }
                  }
                }, '修改')
              ]);
            }
          }
        ],
        data: [],
        dataDetail: {},
        initTable: [],
        format: Util.constant.format,
        addCurrentTableData: false,
        saveLoading: false,
        ajaxType: 'add',
        addData: {
          name: '',
        },
        selectionArr: [],
        collection_data: [],
        collection_columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'title',
            title: '标题',
          },
          {
            key: 'type',
            title: '来源',
            render: (h, params) => {
              var type = params.row.type;
              switch (type) {
                case 'announcement' :
                  type = '公告';
                  break;
                case 'journal' :
                  type = '日志';
                  break;
                case 'work_style' :
                  type = '工作风采';
                  break;
                case 'task' :
                  type = '任务';
                  break;
                case 'chat_notice' :
                  type = '群公告';
                  break;
                case 'knowledge' :
                  type = '知识库';
                  break;
                case 'answer' :
                  type = '知识库回答';
                  break;
                case 'wechat_wish' :
                  type = '微心愿';
                  break;
                case 'regulate' :
                  type = '安全整治';
                  break;
                default :
                  break;
              }
              return h('div', [
                h('span', type)
              ]);
            }
          },
          {
            key: 'creator_name',
            title: '创建人',
          },
          {
            key: 'create_time',
            title: '收藏时间',
            width: 150,
          },
        ],
        collection_selectionArr: [],
      };
    },
    mounted () {
      this.getData();
    },
    methods: {
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/collection/group/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.data = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      changePage (page) {
        var _this = this;
        _this.page = page;
        _this.show_collection_list();
      },
      onRowData: function (data, index) {
        var _this = this;
        var id = data.id;
        _this.id = id;
        _this.show_collection_list();
      },
      // 收藏内容列表
      show_collection_list: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          gid: _this.id,
          page: _this.page,
          size: _this.size,
        };
        var params = {
          url: '/collection/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.collection_data = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 收藏内容 跳转到对应模块
      collection_onRowData: function (data, index) {
        var _this = this;
        var id = data.id;
        var tid = data.tid;
        var type = data.type;
        var _data = {
          id: tid,
          type: type,
        };
        switch (type) {
          case 'knowledge' : // 知识库
          case 'answer' : // 知识库回答
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'knowledge_index');
            _this.$router.push({
              name: 'knowledge_index'
            });
            break;
          case 'announcement' : // 公告
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'affiche_index');
            _this.$router.push({
              name: 'affiche_index'
            });
            break;
          case 'journal' : // 日志
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'logs_index');
            _this.$router.push({
              name: 'logs_index'
            });
            break;
          case 'work_style' : // 工作风采
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'workStyle_index');
            _this.$router.push({
              name: 'workStyle_index'
            });
            break;
          case 'task' : // 任务
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'task_index');
            _this.$router.push({
              name: 'task_index'
            });
            break;
          case 'chat_notice' : // 群公告
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'chats_index');
            _this.$router.push({
              name: 'chats_index'
            });
            break;
          case 'wechat_wish' : // 微心愿
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'wechat_list');
            _this.$router.push({
              name: 'wechat_list'
            });
            break;
          case 'regulate' : // 安全整治
            sessionStorage.setItem('collection_list', Util.toStr(_data));
            Util.openNewPage(_this, 'unsafe_punish_index');
            _this.$router.push({
              name: 'unsafe_punish_index'
            });
            break;
          default :
            break;
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      collection_selectionChange: function (selection) {
        var _this = this;
        _this.collection_selectionArr = selection;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.addCurrentTableData = false;
      },
      // 显示添加界面
      add: function () {
        var _this = this;
        _this.ajaxType = 'add';
        _this.addData.name = '';
        _this.addCurrentTableData = true;
      },
      // 保存数据
      save: function () {
        var _this = this;
        var name = _this.addData.name;
        if (!(name && name != '')) {
          _this.$Message.error('请填写收藏夹名称!');
          return false;
        }
        var data = {
          id: _this.id,
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          name: name,
        };
        var url = '/collection/group/add';
        if (_this.ajaxType == 'update') {
          url = '/collection/group/update';
        }
        var params = {
          url: url,
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.addCurrentTableData = false;
            _this.addData.name = '';
          } else {
            _this.$Message.error('保存信息失败!');
          }
        }

      },
      // 显示修改界面
      update: function (data, index) {
        var _this = this;
        _this.ajaxType = 'update';
        var id = data.id;
        var name = data.name;
        _this.id = id;
        _this.addData.name = name;
        _this.addCurrentTableData = true;
      },
      // 删除收藏夹
      remove: function () {
        var _this = this;
        var selectionArr = _this.selectionArr;
        if (selectionArr.length == 0) {
          _this.$Message.error('请填选择要删除的数据!');
          return false;
        }
        var selectionIds = [];
        for (var k in selectionArr) {
          if (!selectionArr[k]) {
            continue;
          }
          var id = selectionArr[k].id;
          selectionIds.push(id);
        }
        Modal.confirm(_this, {content: '确定删除选中的收藏夹，并且删除收藏夹中的内容？'}, function () {
          var data = {
            id: selectionIds,
          };
          var params = {
            url: '/collection/group/deleteMultiple',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            } else {
              _this.$Message.error('删除信息失败!');
            }
          }
        }, function () {
        });
      },
      // 删除收藏
      remove_collection: function () {
        var _this = this;
        var selectionArr = _this.collection_selectionArr;
        if (selectionArr.length == 0) {
          _this.$Message.error('请填选择要删除的数据!');
          return false;
        }
        var selectionIds = [];
        for (var k in selectionArr) {
          if (!selectionArr[k]) {
            continue;
          }
          var id = selectionArr[k].id;
          selectionIds.push(id);
        }
        Modal.confirm(_this, {content: '确定删除选中的数据？'}, function () {
          var data = {
            id: selectionIds,
          };
          var params = {
            url: '/collection/deleteMultiple',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.show_collection_list();
            } else {
              _this.$Message.error('删除信息失败!');
            }
          }
        }, function () {
        });
      },

    }
  };
</script>
